<!--
@license
Copyright 2017 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/lodash.html">


<dom-module id="tf-debugger-initial-dialog">
  <template>
    <!-- We use a custom backdrop to avoid occluding the TensorBoard navbar. -->
    <template is="dom-if" if="[[_open]]">
      <div id="dashboard-backdrop"></div>
    </template>
    <paper-dialog id="dialog"
                  modal
                  opened="{{_open}}"
                  width="320"
                  with-backdrop="[[_useNativeBackdrop]]">
      <h2 id='dialog-title'>Waiting for first Session.run() to connect...</h2>
      <div class='code-example'>
        <!-- TODO(cais): Rename id. -->
        <pre id="session-run-code-example">
# To connect to the debugger from your tf.Session:
from tensorflow.python import debug as tf_debug
sess = tf.Session()
sess = tf_debug.TensorBoardDebugWrapperSession(sess, "[[_host]]:[[_port]]")
sess.run(my_fetches)
        </pre>
        <pre id="hook-code-example">
# To connect to the debugger using hooks, e.g., from tf.Estimator:
from tensorflow.python import debug as tf_debug
hook = tf_debug.TensorBoardDebugHook("[[_host]]:[[_port]]")
my_estimator.fit(x=x_data, y=y_data, steps=1000, monitors=[hook])
        </pre>
      </div>
    </paper-dialog>
  </template>
  <style>
    /** We rely on a separate `_hidden` property instead of directly making use
        of the `_open` attribute because this CSS specification may strangely
        affect other elements throughout TensorBoard. See #899. */
    :host[_hidden] {
      display: none;
    }

    :host, #dashboard-backdrop {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    #dashboard-backdrop {
      background: rgba(0, 0, 0, 0.6);
    }

    .code-example {
      margin: 10px;
      font-family: monospace;
    }
  </style>
  <script>

  Polymer({
    is: "tf-debugger-initial-dialog",
    properties: {
      _host: {
        type: String,
        value: null,
      },
      _port: {
        type: String,
        value: null,
      },
      _open: {
        type: Boolean,
      },
      _hidden: {
        type: Boolean,
        computed: '_computeHidden(_open)',
        reflectToAttribute: true,  // for CSS 
      },
      // Suppress the native paper-dialog backdrop. We use a custom one. We make
      // the dialog reference this bound property instead of directly setting
      // the attribute to the string "false" in the HTML because Polymer
      // unfortunately parses "false" as a true-ey value (a non-empty string).
      _useNativeBackdrop: {
        type: Boolean,
        value: false,
        readOnly: true,
      },
    },
    openDialog(host, port) {
      this.$.dialog.open();
      if (host != null && port != null) {
        // TODO(cais): Use markdown; syntax highlight Python code.
        this.set('_host', host);
        this.set('_port', port);
      }
    },
    closeDialog() {
      this.$.dialog.close();
    },
    renderDebuggerNotEnabledMessage() {
      this.$.dialog.open();
      Polymer.dom(this.$$('#dialog-title')).textContent =
          'ERROR: debugger is not enabled in this TensorBoard instance.';
      let ex = 'To enable the debugger in tensorboard, use the flag: ' +
               '--debugger_port <port_number>'
      Polymer.dom(this.$$('#session-run-code-example')).textContent = ex;
      Polymer.dom(this.$$('#hook-code-example')).textContent = '';
    },
    _computeHidden(open) {
      return !open;
    },
  });
  </script>
</dom-module>
